<template>
  <div :id="elId"></div>
</template>
<script>
import Konva from "konva";
import { v4 } from "uuid";
export default {
  data() {
    return {
      elId: "",
      stage: null,
    };
  },
  props: {
    height: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 0,
    },
    needLine: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.elId = v4();
  },
  mounted() {
    this.stage = new Konva.Stage({
      container: this.elId,
      width: this.width,
      height: this.height,
    });
    // add canvas element
    let layer = new Konva.Layer();
    this.stage.add(layer);

    if (this.needLine) {
      let line = new Konva.Line({
        points: [0, this.height / 2, this.width, this.height / 2],
        strokeWidth: 4,
        strokeLinearGradientStartPoint: { x: 0, y: 0 },
        strokeLinearGradientEndPoint: { x: this.width, y: 0 },
        strokeLinearGradientColorStops: [
          0,
          "rgba(34,133,201,1)",
          0.5,
          "rgba(34,133,201,1)",
          1,
          "rgba(34,133,201,0.1)",
        ],
      });
      layer.add(line);
    }

    let circle1 = new Konva.Ellipse({
      x: -10000,
      y: -10000,
      radiusY: 2,
      radiusX: 4,
      fill: "rgba(255,255,255,1)",
      shadowColor: "rgba(255,255,255,1)",
      shadowBlur: 2,
      shadowOffsetX: 10000,
      shadowOffsetY: 10000 + this.height / 2 - 1,
    });
    let circle2 = new Konva.Ellipse({
      x: -10000,
      y: -10000,
      radiusY: 2.5,
      radiusX: 10,
      fill: "rgba(255,255,255,1)",
      shadowColor: "rgba(255,255,255,1)",
      shadowBlur: 5,
      shadowOffsetX: 10000,
      shadowOffsetY: 10000 + this.height / 2,
    });
    let circle3 = new Konva.Ellipse({
      x: -10000,
      y: -10000,
      radiusY: 2,
      radiusX: 20,
      fill: "rgba(255,255,255,1)",
      shadowColor: "rgba(0,200,255,1)",
      shadowBlur: 10,
      shadowOffsetX: 10000,
      shadowOffsetY: 10000 + this.height / 2 + 1,
    });
    layer.add(circle3);
    layer.add(circle2);
    layer.add(circle1);
    let percent = 0;
    let anim = new Konva.Animation((frame) => {
      let speed = 2;
      percent += 1 / ((speed * 1000) / frame.timeDiff);
      circle1.shadowOffsetX(10000 + percent * this.width);
      circle2.shadowOffsetX(10000 + percent * this.width);
      circle3.shadowOffsetX(10000 + percent * this.width);
      if (percent >= 1) {
        percent = 0;
      }
      // update stuff
    }, layer);

    anim.start();
  },
};
</script>
